<template>
	<div class="TotalWallet">
		<v-header></v-header>
		<div class="TotalWallet-history" v-on:click='go("HistoryWallet",$store.state.type)'>
			交易记录
			<i class="iconfont right">&#xe62e;</i>
		</div>

		<mt-navbar v-model="selected">
			<mt-tab-item id="1" v-on:click.native='changeTab("receive")'>接收KBC</mt-tab-item>
			<mt-tab-item id="2" v-on:click.native='changeTab("send")'>发送KBC</mt-tab-item>
			<mt-tab-item id="3" v-on:click.native='changeTab("transfer")'>资金流转</mt-tab-item>
		</mt-navbar>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="1">
				<div class="table1">
					<p>
						<strong>温馨提示：</strong><span class="red">KBC 地址只能充值 KBC 资产，任何充入 KBC 地址的非 KBC 资产将不可找回。</span>在 KBC 网络接收 KBC 通常需要 10 分钟。我们会在收到 KBC 网络 1 个确认后给您入账。最低存入金额为 0.0002 KBC， 我们不会处理少于该金额的 KBC 存入请求。在平台内相互转账是实时到账且免费的。
					</p></br>
					<div class="TotalWallet-box">
						<p><strong>流通钱包接收地址：</strong></p>
						<input type="text" class="ZQBUrl" name="ZQBUrl" id="ZQBUrl" placeholder="" v-model="kbcReceiveAddress"/>
						<mt-button v-if="!isShowBtn" size="small" v-on:click="copyZQBUrl()">复 制</mt-button>
						<div v-if="isShowBtn" class="TotalWallet-bnt" v-on:click='createReceiveAddress("mywallet")'>生成地址</div>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
				<div class="table1">
					<p>
						<strong>温馨提示：</strong><span class="red">KBC 地址只能充值 KBC 资产，任何充入 KBC 地址的非 KBC 资产将不可找回。</span>在 KBC 网络接收 KBC 通常需要 10 分钟。我们会在收到 KBC 网络 1 个确认后给您入账。最低存入金额为 0.0002 KBC， 我们不会处理少于该金额的 KBC 存入请求。在平台内相互转账是实时到账且免费的。
					</p>
					<div class="TotalWallet-con">
						<mt-field label="发送地址" placeholder="请输入发送地址" v-model="receiveAddress">
						</mt-field>
						<div id="getMemberByAddrData" class="red" style="padding: 0 10px;word-wrap:break-word">{{getMemberByAddrData}}</div>
						<mt-field label="数量" placeholder="请输入数量" v-model="transferAmount" v-on:click.native="getMemberByAddr()"></mt-field>
						<mt-field label="交易密码" type="password" placeholder="请输入交易密码" v-model="tradePass" v-on:click.native="getMemberByAddr()"></mt-field>
						<mt-field label="备注" placeholder="请输入备注" v-model="remark" v-on:click.native="getMemberByAddr()"></mt-field>
					</div>
					<div class="TotalWallet-bnt" v-on:click="transferKbcC2C">发送虚拟货币前，请先设置交易密码</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="3">
				<div class="table1">
					<p><strong>温馨提示：</strong><span class="red">KBC 地址只能充值 KBC 资产，任何充入 KBC 地址的非 KBC 资产将不可找回。</span>在 KBC 网络接收 KBC 通常需要 10 分钟。我们会在收到 KBC 网络 1 个确认后给您入账。最低存入金额为 0.0002 KBC， 我们不会处理少于该金额的 KBC 存入请求。在平台内相互转账是实时到账且免费的。
					</p>
					<div class="TotalWallet-con">
						<mt-field label="转出方式" @click.native="TurnOutTheWallet(201)" v-model="currName" disabled="disabled">
							<i class="iconfont right">&#xe62f;</i>
						</mt-field>
						<mt-field label="转出资金" placeholder="" v-model="transferAmounts"></mt-field>
					</div>
					<div class="TotalWallet-bnt" v-on:click="transferKbc">发送虚拟货币前，请先设置交易密码</div>
				</div>
			</mt-tab-container-item>
		</mt-tab-container>
		<!--交易钱包-->
		<mt-popup v-model="popupVisible" popup-transition="popup-fade" position="bottom">
			<ul class="mtpopup-list">
				<li v-for="itme in TurnOutTheWalle" v-on:click="TurnOutTheWallethide(itme.name,itme.type)">{{itme.name}}</li>
			</ul>
		</mt-popup>
	</div>
</template>
<style>
  .TotalWallet{ width: 100%;overflow:scroll; position: absolute; height: 100%; box-sizing: border-box; padding-top: 4rem; padding-bottom: 5rem;}
  .TotalWallet-history{
  		 width: 100%;
		 margin: 0 auto 0.5rem;
		 box-sizing: border-box;
         padding: 1rem;
         display: flex;
         background: #fff;
         position: relative;
         font-size: 1.4rem;
  }
  .TotalWallet .mint-field-core{
  	background: #fff;
  }
  .TotalWallet-history .right{
	  	position: absolute;
	  	top:1.2rem;
	  	right:1rem;
	  	color: #d4d4d4;
	  	font-size:1.3rem;
  }
   .TotalWallet .mint-navbar .mint-tab-item.is-selected{
  	 background: #4e8bfe;
  	 color: #fff;
  }
    .TotalWallet .table1{
    	background: #fff;
    	padding: 1rem;
    	border-top:1px solid #eee
    }
    .TotalWallet-box{
    	width: 100%;
    	display: block;
    	box-sizing: border-box;
    	background:#eee;
    	padding: 1rem;
    }
    .TotalWallet-box p{
    	width: 100%;
    	overflow: hidden;
    	line-height:2rem;
    	word-wrap:break-word
    }
      .TotalWallet-bnt{
      	 min-width:100px;
      	 margin: 0 auto;
      	 display: block;
      	 padding: 1rem;
      	 background: #4e8bfe;
      	 color: #fff;
      	 text-align: center;
      	 border-radius: 5px;
      }
    .TotalWallet-con{
    	margin: 1rem auto;
    	border: 1px solid #eee;
    	border-top:0;
    	border-bottom: 0;
    	overflow: hidden;
    }
    .TotalWallet-con .iconfont{
    	color: #eee;
    }
    .ZQBUrl {
		width: 100%;
		border: 0;
		background: #eee;
	}
	.TotalWallet .mint-popup-bottom {
		width: 100%;
	}
	
	.TotalWallet .mtpopup-list {
		width: 100%;
		background: #fff;
		padding: 0;
	}
	
	.TotalWallet .mtpopup-list li {
		text-align: left;
		border-bottom: 1px solid #eee;
		padding: 1rem;
	}
</style>
<script>
	import vHeader from './../common/Header.vue';
	import router from './../../router';
	import util from './../../js/util/util.js';
	import { Indicator, Cell, Navbar, popup, Toast , MessageBox} from 'mint-ui';
	export default {
		data() {
			return {
				selected: '1',
				popupVisible: false,
				username: '',
				kbcReceiveAddress: '',
				walletType:'1',
				currType: '201',
				currName: '交易钱包转生息钱包',
				receiveAddress: '',
				transferAmount: '',
				transferAmounts: '',
				tradePass: '',
				remark: '',
				getMemberByAddrData:'',
				TurnOutTheWalletData: '',
				isShowBtn: false,//是否显示生成地址按钮
				TurnOutTheWalle: [{
					name: "交易钱包转生息钱包",type: "201"
				}, {
					name: "交易钱包转流通钱包",type: "207"
				},{
					name: "流通钱包转生息钱包",type: "208"
				}, {
					name: "生息钱包转交易钱包",type: "203"
				}, {
					name: "生息钱包转流通钱包",type: "210"
				},{
					name: "奖励钱包转交易钱包",type: "205"
				}, {
					name: "奖励钱包转生息钱包",type: "206"
				}]
			}
		},
		created() {
			this.$store.state.type = this.$route.query.type;
			
			if(this.$store.state.type == 1){
				this.$store.state.headings = "交易钱包"; //修改标题
			}else if(this.$store.state.type == 2){
				this.$store.state.headings = "流通钱包"; //修改标题
			}else if(this.$store.state.type == 3){
				this.$store.state.headings = "生息钱包"; //修改标题
			}else if(this.$store.state.type == 4){
				this.$store.state.headings = "奖励钱包"; //修改标题
			}
//			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = true; //显示底部导航
			this.$store.state.flag = 2;
		},
		methods: {
			getMemberByAddr: function() {//返回收款地址数据 
				let $this = this;
				if(!util.isEmpty($this.receiveAddress)&&util.isEmpty(document.getElementById("getMemberByAddrData").innerText)){
					util.Ajax('/kbc/getMemberByAddr', "GET", {
						"Address": $this.receiveAddress
					}, function(data) {
						$this.getMemberByAddrData=data.msg
					})
				}
			},
			changeTab: function(Type) { //点击TAB
				if(Type == "receive") this.getReceiveAddress('mywallet'); //初始加载时获取总钱包接收地址
//else if(Type == "send") {
//					this.getReceiveAddress('send'); //初始加载时获取总钱包接收地址
//				} else if(Type == "transfer") {
//					this.getReceiveAddress('transfer'); //初始加载时获取奖励钱包接收地址
//				}
			},
			getReceiveAddress: function(addressFlag) { //初始加载时获取总钱包接收地址
				let $this = this;
				util.Ajax('/kbc/getReceiveAddress', "GET", {
					"addressFlag": addressFlag
				}, function(data) {
					if(data.code == 0) {
						$this.kbcReceiveAddress = data.kbcReceiveAddress;
						if(util.isEmpty(data.kbcReceiveAddress)){ //非空判断
							$this.isShowBtn = true; //显示生成地址按钮
						}
					}
				})
			},
			createReceiveAddress: function(addressFlag) { //创建总钱包接收地址
				let $this = this;
				util.Ajax('/kbc/createreceiveAddress', "GET", {
					"addressFlag": addressFlag
				}, function(data) {
					if(data.code == 0) {
						Toast(data.msg)
						$this.kbcReceiveAddress = data.kbcReceiveAddress
						$this.isShowBtn = false;
					}

				})
			},
			TurnOutTheWallet: function(index) {
				this.popupVisible = true
				this.TurnOutTheWalletData = index;
			},
			TurnOutTheWallethide: function(name,type) {
				this.popupVisible = false
				this.currType = type;
				this.currName = name;
			},
			transferKbc: function() { //发送虚拟货币前，请先设置交易密码
				var $this = this;
				var type = $this.currType;
				var transferAmounts = $this.transferAmounts;
				if(util.isEmpty(transferAmounts)) {
					Toast("请输入正确K币数量，最多支持两位小数");
					return;
				} else if(util.isMoney(transferAmounts)) {
					//显示即将扣除的费率
					util.Ajax('/admin/sysDict/getDictionariesByKey', "GET", {
						"key": "Exchange_Rate-005"
					}, function(data) {
						if(data.code == 0) {
							if(type=='203'||type=='210'){
								var enUs = data.dictionaries.enUs; //0.02
								var paySms = "转出" + transferAmounts + "，扣除手续费" + (enUs * 100) + "%，实际到帐" + (transferAmounts - transferAmounts * enUs)
								$this.commonTransferKbc(paySms,type,transferAmounts);
								return;
							}else if(type=='205'||type=='206'){
								util.Ajax('/admin/sysDict/getDictionariesByKey', "GET", {
									"key": "Exchange_Rate-001"
								}, function(data) {
									if(data.code == 0) {
										var enUs1 = data.dictionaries.enUs;//0.02
			    						var paySms ="将兑换："+transferAmounts+"k积分为："+util.returnFloat(Number(transferAmount)/Number(enUs1))+"K币";
										$this.commonTransferKbc(paySms,type,transferAmounts);
										return;
									}
								});
							}
							var paySms ="你将转出："+transferAmounts+"K币，确定吗？";
							$this.commonTransferKbc(paySms,type,transferAmounts);
						}
					})
				} else {
					Toast("请输入正确K币数量，最多支持两位小数");
				}
			},
			commonTransferKbc: function(paySms,type,transferAmounts){
				MessageBox.confirm(paySms).then(action => {
					util.Ajax('/kbc/transferKbc', "GET", {
						"trans_type":type,
						"transferAmount": transferAmounts
					}, function(data) {
						Toast(data.msg)
					})
				});
			},
			transferKbcC2C: function() { //发送虚拟货币前，请先设置交易密码
				this.getMemberByAddr();
				let $this = this;
				if(util.isEmpty($this.transferAmount)){
					Toast("请输入正确K币数量，最多支持两位小数");
					return;
				} else if(util.isMoney($this.transferAmount)) {
					util.Ajax('/kbc/transferKbcC2C', "GET", {
						"receiveAddress": $this.receiveAddress,
						"transferAmount": $this.transferAmount,
						"tradePass": $this.tradePass,
						"remark": $this.remark
					}, function(data) {
						if(data.code==0){
							Toast(data.msg)
						}
						
					})
				} else {
					Toast("请输入正确K币数量，最多支持两位小数");
				}
			},
			go: function(url,type) {
				util.pushRouter(router, url, {"type":type});
			},
			copyZQBUrl:function(){ //复制总钱包接收地址
				var url = document.getElementById("ZQBUrl");
				url.select();
			    document.execCommand("copy",false,null);
			    this.$toast('复制成功！');
        	}
		},
		components: {
			vHeader,
			Cell,
			popup,
			Navbar
		},
		mounted: function() { //加载完成后执行
			let $this = this;
			util.Ajax('/kbc/getReceiveAddress', "GET", { //获取钱包地址
				"addressFlag": "mywallet",
			}, function(data) {
				if(data.code == 0) {
					$this.kbcReceiveAddress = data.kbcReceiveAddress;
					if(util.isEmpty(data.kbcReceiveAddress)){
						$this.isShowBtn = true;
					}
				}
			})
		}
	}
</script>
